<template>
  <div class="main-page" style="min-width:1366px;">
    <!-- 表单 -->
    <el-button type="primary" style="margin-left:10px;margin-top:10px" @click="SaveSetEdit">保存并生效</el-button>
    <el-form>
      <el-card class="box-card" style="border: 0px;">
        <div slot="header" class="clearfix">
          <span>年龄范围设置</span>
        </div>
        <div class="text">
          <el-form :inline="true" :model="SetData" class="demo-form-inline">
            <el-form-item label="小儿年龄">
              &lt;
              <el-input v-model="SetData.xiaoEr.highAge">
                <template slot="append">岁</template>
              </el-input>
            </el-form-item>
            <el-form-item label="儿童年龄">
              &lt;
              <el-input v-model="SetData.erTong.highAge">
                <template slot="append">岁</template>
              </el-input>
            </el-form-item>
            <el-form-item label="成人年龄">
              <el-input v-model="SetData.chengRen.lowAge">
                <template slot="append">岁</template>
              </el-input>
              <label>&gt;</label>
              <el-input v-model="SetData.chengRen.highAge">
                <template slot="append">岁</template>
              </el-input>
            </el-form-item>
            <el-form-item label="老人年龄">
              <el-input v-model="SetData.laoRen.lowAge">
                <template slot="append">岁</template>
              </el-input>
              <label>&gt;</label>
              <el-input v-model="SetData.laoRen.highAge">
                <template slot="append">岁</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="box-card" style="border: 0px;">
        <div slot="header" class="clearfix">
          <span>警示级别设置</span>
        </div>
        <div class="text">
          <el-form :inline="true" :model="SetData" class="demo-form-inline">
            <el-form-item label="警示级别">
              <el-select v-model="SetData.hpSlCode">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="警示级别提示:">
              <label style="color: red;">警示级别说明：如设置为不推荐，那么医生可看到不推荐、禁忌、拦截信息</label>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card class="box-card3" style="border: 0px;">
        <div slot="header" class="clearfix">
          <span>妊娠相关设置</span>
        </div>
        <el-card class="box-card3-1">
          <div slot="header" class="clearfix1">
            <span>妊娠关键字</span>
          </div>
          <div class="Tag">
            <el-tag
              :key="tag"
              v-for="tag in SetData.preWordList"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >{{tag}}</el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="gestationValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            ></el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">新增关键字</el-button>
          </div>
        </el-card>
        <el-card class="box-card3-1">
          <div slot="header" class="clearfix1">
            <span>非妊娠关键字</span>
          </div>
          <div class="Tag">
            <el-tag
              :key="tag"
              v-for="tag in SetData.notPreWordList"
              closable
              :disable-transitions="false"
              @close="handleClose2(tag)"
            >{{tag}}</el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible2"
              v-model="NonPregnancyValue"
              ref="saveTagInput2"
              size="small"
              @keyup.enter.native="handleInputConfirm2"
              @blur="handleInputConfirm2"
            ></el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput2">新增关键字</el-button>
          </div>
        </el-card>
        <el-card class="box-card3-1" style="height: 115px;">
          <div slot="header" class="clearfix1">
            <span>妊娠设置提示</span>
          </div>
          <div class="gestationLabel">
            <label style="margin-bottom: 8px;">妊娠诊断关键字说明：如诊断中含以上关键字，该诊断属于妊娠期内</label>

            <label>非妊娠诊断关键字说明：如诊断中含以上关键字，该诊断属于非妊娠期内</label>
          </div>
        </el-card>
      </el-card>
      <el-card class="box-card4" style="border: 0px;">
        <div slot="header" class="clearfix">
          <span>其他设置</span>
        </div>
        <div class="text">
          <el-form-item label="抗菌药物分级:">
            <el-checkbox
              :true-label="1"
              :false-label="0"
              v-model="SetData.classificationState"
            >打√表示启用</el-checkbox>
          </el-form-item>
          <el-form-item label="围术期:">
            <el-checkbox :true-label="1" :false-label="0" v-model="SetData.operationState">打√表示启用</el-checkbox>
          </el-form-item>
          <el-form-item label="特殊审查:">
            <el-checkbox
              :true-label="1"
              :false-label="0"
              v-model="SetData.dosage_low"
            >低于频次、推荐量、日总量的、限制剂量审查</el-checkbox>
          </el-form-item>

          <el-form :inline="true" :model="SetData" class="demo-form-inline">
            <el-form-item label="普通药品持续:">
              <el-input v-model="SetData.putong_durationday">
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="抗菌药品持续:">
              <el-input v-model="SetData.anti_durationday">
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { getParameterSet, SaveSetEdit } from "@/api/rad";
export default {
  name: "MainPage",
  components: {},
  created: function() {
    this.getParameterSet();
  },
  methods: {
    handleClose(tag) {
      this.SetData.preWordList.splice(this.SetData.preWordList.indexOf(tag), 1);
    },
    handleClose2(tag) {
      this.SetData.notPreWordList.splice(
        this.SetData.notPreWordList.indexOf(tag),
        1
      );
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    showInput2() {
      this.inputVisible2 = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput2.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let gestationValue = this.gestationValue;
      if (gestationValue) {
        this.SetData.preWordList.push(gestationValue);
      }
      this.inputVisible = false;
      this.gestationValue = "";
    },
    handleInputConfirm2() {
      let NonPregnancyValue = this.NonPregnancyValue;
      if (NonPregnancyValue) {
        this.SetData.notPreWordList.push(NonPregnancyValue);
      }
      this.inputVisible2 = false;
      this.NonPregnancyValue = "";
    },
    async getParameterSet() {
      let res = await this.$rad.getParameterSet();
      this.SetData.hpSlCode = res.hpSlCode;
      this.SetData.xiaoEr.highAge = res.xiaoEr.highAge;
      this.SetData.erTong.highAge = res.erTong.highAge;
      this.SetData.chengRen.lowAge = res.chengRen.lowAge;
      this.SetData.chengRen.highAge = res.chengRen.highAge;
      this.SetData.laoRen.lowAge = res.laoRen.lowAge;
      this.SetData.laoRen.highAge = res.laoRen.highAge;
      this.SetData.preWordList = res.preWordList;
      this.SetData.notPreWordList = res.notPreWordList;
      this.SetData.classificationState = res.classificationState;
      this.SetData.operationState = res.operationState;
      this.SetData.dosage_low = res.dosage_low;
      this.SetData.putong_durationday = res.putong_durationday;
      this.SetData.anti_durationday = res.anti_durationday;
      console.log(res.classificationState);
      console.log(res.operationState);
      console.log(res.dosage_low);
      console.log(res);
    },
    async SaveSetEdit() {
      // console.log(this.SetData.preWordList);
      // console.log(this.SetData.notPreWordList);
      // var arr = this.SetData.preWordList;
      // console.log(arr);
      let res = await this.$rad.SaveSetEdit({
        xiaoErHighAge: this.SetData.xiaoEr.highAge,
        erTongHighAge: this.SetData.erTong.highAge,
        chengRenLowAge: this.SetData.chengRen.lowAge,
        chengRenHighAge: this.SetData.chengRen.highAge,
        laoRenLowAge: this.SetData.laoRen.lowAge,
        laoRenHighAge: this.SetData.laoRen.highAge,
        hpSlCode: this.SetData.hpSlCode,
        preWord: this.SetData.preWordList.join(),
        feiPreWord: this.SetData.notPreWordList.join(),
        classificationState: this.SetData.classificationState,
        operationState: this.SetData.operationState,
        putong_durationday: this.SetData.putong_durationday,
        anti_durationday: this.SetData.anti_durationday,
        dosage_low: this.SetData.dosage_low
      });
      console.log(this.SetData.dosage_low);
      console.log(res);
      if (res.code == 1) {
        this.getParameterSet();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    }
  },
  data() {
    return {
      SetData: {
        // 警示级别 0：拦截，1：禁忌，2：不推荐，4：轻微
        hpSlCode: "",
        xiaoEr: {
          // 最大年龄
          highAge: ""
        },
        erTong: {
          // 儿童最大年龄
          highAge: ""
        },
        chengRen: {
          // 最小年龄
          lowAge: "",
          // 最大年龄
          highAge: ""
        },
        laoRen: {
          // 最小年龄
          lowAge: "",
          // 最大年龄
          highAge: ""
        },
        // 妊娠关键字
        preWordList: [],
        // 非妊娠关键字
        notPreWordList: [],
        // 抗菌药物分级管理是否开启 1：开启 0 关闭
        classificationState: "",
        // 围术期管理是否开启 1：开启 0 关闭
        operationState: "",
        // 普通药品超过该持续天数拦截
        putong_durationday: "",
        // 抗菌药品超过该持续天数拦截
        anti_durationday: "",
        // 低于频次、推荐量、日总量的、限制剂量
        dosage_low: ""
      },
      options: [
        {
          value: 0,
          label: "拦截"
        },
        {
          value: 1,
          label: "禁忌"
        },
        {
          value: 2,
          label: "不推荐"
        },
        {
          value: 4,
          label: "轻微"
        }
      ],
      checkList: [],

      // 妊娠关键字
      // gestationTags: ["妊娠", "孕", "怀", "产前"],
      inputVisible: false,
      gestationValue: "",
      // 非妊娠关键字
      // NonPregnancyTags: ["不孕", "不育"],
      inputVisible2: false,
      NonPregnancyValue: ""
    };
  }
};
</script>
<style scoped>
.main-page .box-card {
  margin: 10px 20px 10px 10px;
  height: 92px;
}
.main-page .box-card4 {
  margin: 10px 20px 10px 10px;
}
.main-page .box-card3 {
  margin: 10px 20px 10px 10px;
  height: 390px;
}

.box-card >>> .el-card__header {
  padding: 8px 10px;
  background: #dddddd;
}
.el-card >>> .el-card__body {
  padding: 8px 10px;
}
.el-form-item >>> .el-input {
  width: 120px;
}
.el-form-item {
  margin-right: 35px;
  margin-bottom: 0px;
}
.box-card3 >>> .el-card__header {
  padding: 8px 10px;
  background: #dddddd;
}
.box-card3-1 >>> .el-card__header {
  padding: 8px 10px;
  background: #fff;
}
.box-card3-1 >>> .el-card__body {
  padding: 8px 10px;
  height: 56px;
}
.main-page .box-card3-1 {
  margin: 10px 20px 10px 10px;
  height: 92px;
}
/* Tag标签 */
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.gestationLabel {
  color: red;
  display: flex;
  flex-direction: column;
}
</style>
